<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../tf-graph-loader/tf-graph-loader.html">
<link rel="import" href="../tf-graph-board/tf-graph-board.html">
<link rel="import" href="../tf-graph/tf-graph-controls.html">
<link rel="import" href="../tf-dashboard-common/tf-no-data-warning.html">
<link rel="import" href="../tf-backend/tf-backend.html">

<!--
tf-graph-dashboard displays a graph from a TensorFlow run.

It has simple behavior: Creates a url-generator and run-generator
to talk to the backend, and then passes the runsWithGraph (list of runs with
associated graphs) along with the url generator into tf-graph-board for display.

If there are multiple runs with graphs, the first run's graph is shown
by default. The user can select a different run from a dropdown menu.
-->

<dom-module id="tf-graph-dashboard">
<template>
<tf-no-data-warning
  data-type="graph"
  show-warning="[[_datasetsEmpty(_datasets)]]"
></tf-no-data-warning>
<template is="dom-if" if="[[!_datasetsEmpty(_datasets)]]">
<tf-dashboard-layout>
<div class="sidebar">
  <tf-graph-controls id="controls"
      color-by-params="[[_colorByParams]]"
      has-stats="[[_hasStats]]"
      color-by="{{_colorBy}}",
      datasets="[[_datasets]]",
      selected-dataset="{{_selectedDataset}}"
      selected-file="{{_selectedFile}}"
  ></tf-graph-controls>
  <tf-graph-loader id="loader"
          datasets="[[_datasets]]",
          selected-dataset="[[_selectedDataset]]"
          selected-file="[[_selectedFile]]"
          out-graph-hierarchy="{{_graphHierarchy}}"
          out-graph="{{_graph}}"
          out-graph-name="{{_graphName}}"
          has-stats="{{_hasStats}}"
          progress="{{_progress}}"
          out-hierarchy-params="{{_hierarchyParams}}"
  ></tf-graph-loader>
</div>
<div class="center">
    <tf-graph-board id="graphboard"
                graph-hierarchy="[[_graphHierarchy]]"
                graph="[[_graph]]"
                has-stats="[[_hasStats]]"
                graph-name="[[_graphName]]"
                progress="[[_progress]]"
                color-by="[[_colorBy]]"
                color-by-params="{{_colorByParams}}"
                hierarchy-params="[[_hierarchyParams]]">
    </tf-graph-board>
</div>
</tf-dashboard-layout>
</template>
<style>

:host /deep/ {
  font-family: 'Roboto', sans-serif;
}

.center {
  position: relative;
  height: 100%;
}

</style>
</template>
</dom-module>

<script>
(function() {
Polymer({
  is: 'tf-graph-dashboard',
  properties: {
    _datasets: {
      type: Object,
      computed: '_getDatasets(runs.*, router)'
    },
    backend: {type: Object, observer: 'reload'},
    router: {type: Object},
    runs: Array,
  },
  reload: function() {
    var _this = this;
    this.backend.graphRuns().then(function(x) {
      _this.runs = x;
    });
  },
  _getDatasets: function(runs, router) {
    return _.map(this.runs, function(runName) {
      return {
        name: runName,
        path: router.graph(runName, tf.graph.LIMIT_ATTR_SIZE,
            tf.graph.LARGE_ATTRS_KEY)
      };
    });
  },
  _datasetsEmpty: function(datasets) {
    return !datasets || !datasets.length;
  }
});
})();
</script>
